import { useSetState } from 'ahooks';
import { Dialog, Grid, Toast } from 'antd-mobile';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

/**
 * Components
 */
import Canvas from '@/components/canvas';
import Tabs from '@/components/tabs';

/**
 * Resources
 */
import iconDelete from '@/assets/icon_delete.png';
import iconShare from '@/assets/icon_share.png';

/**
 * Types
 */
type State = {
    list: {
        colors: string[];
        name: string;
    }[];
    selected: boolean;
    selectedKeys: number[];
};

const PageShare: React.FC = () => {
    /**
     * Hooks
     */
    const navigate = useNavigate();

    /**
     * States
     */
    const [state, setState] = useSetState<State>({
        list: [],
        selected: false,
        selectedKeys: [],
    });

    /**
     * Effects
     */
    useEffect(() => {
        if (!JeeWeb) return;

        JeeWeb.get('share', ({ result = [] }) => {
            setState({
                list: result || [],
            });
        });
    }, []);

    return (
        <div className="jj-page">
            <header className="jj-header">
                <Tabs activeKey="/share" />

                <div
                    className="jj-btn"
                    onClick={() => {
                        setState({ selected: !state.selected, selectedKeys: [] });
                    }}
                >
                    {state.selected ? '取消' : '选择'}
                </div>
            </header>

            <main className="jj-main">
                <Grid columns={2} gap={11}>
                    {state.list.map((item, index) => (
                        <Grid.Item
                            key={index}
                            style={{ textAlign: 'center' }}
                            onClick={() => {
                                if (!state.selected) {
                                    return JeeWeb.set('current', { index, item }, () => {
                                        navigate('/create');
                                    });
                                }

                                if (state.selectedKeys.includes(index)) {
                                    setState({
                                        selectedKeys: state.selectedKeys.filter((key) => key !== index),
                                    });
                                } else {
                                    setState({
                                        selectedKeys: [...state.selectedKeys, index],
                                    });
                                }
                            }}
                        >
                            <div className="jj-item">
                                {state.selected && (
                                    <div
                                        className={`jj-item-selected ${state.selectedKeys.includes(index) ? 'jj-item-selected-active' : ''}`}
                                    />
                                )}

                                <div className="jj-item-wrap">
                                    <Canvas colors={item.colors} />
                                </div>
                            </div>

                            <div className="jj-name">来自 @{item.name}</div>
                        </Grid.Item>
                    ))}
                </Grid>

                {state.list.length === 0 && (
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            height: '100%',
                            color: '#7a8799',
                            fontSize: '15px',
                        }}
                    >
                        - 暂无数据 -
                    </div>
                )}
            </main>

            {state.selected && (
                <footer className={`jj-footer ${state.selected ? 'jj-footer-border' : ''}`}>
                    <Grid columns={2} gap={100}>
                        <Grid.Item
                            style={{ textAlign: 'center' }}
                            onClick={() => {
                                if (state.selectedKeys.length === 0) {
                                    return Toast.show('请选择项目');
                                }

                                if (state.selectedKeys.length > 1) {
                                    return Toast.show('只能分享 1 个项目');
                                }

                                JeeWeb.share({
                                    shareInfo: state.list[state.selectedKeys[0]],
                                    callback: ({ code }) => {
                                        if (code === 200) {
                                            Toast.show({
                                                content: '分享成功',
                                            });

                                            setState({
                                                selected: false,
                                                selectedKeys: [],
                                            });
                                        }
                                    },
                                });
                            }}
                        >
                            <img
                                alt=""
                                src={iconShare}
                                style={{ width: '54px', height: '54px', verticalAlign: 'top' }}
                            />

                            <div style={{ marginTop: '6px', color: '#2E2F33', fontSize: '12px', lineHeight: '14px' }}>
                                分享项目
                            </div>
                        </Grid.Item>

                        <Grid.Item
                            style={{ textAlign: 'center' }}
                            onClick={() => {
                                if (state.selectedKeys.length === 0) {
                                    return Toast.show('请选择项目');
                                }

                                Dialog.confirm({
                                    title: '删除项目',
                                    content: '确认是否删除涂鸦作品',
                                    onConfirm: () => {
                                        const list = state.list.filter(
                                            (_, index) => !state.selectedKeys.includes(index),
                                        );

                                        JeeWeb.set('share', list, () => {
                                            setState({
                                                list,
                                                selected: false,
                                                selectedKeys: [],
                                            });

                                            Toast.show({
                                                content: '删除成功',
                                            });
                                        });
                                    },
                                });
                            }}
                        >
                            <img
                                alt=""
                                src={iconDelete}
                                style={{ width: '54px', height: '54px', verticalAlign: 'top' }}
                            />

                            <div style={{ marginTop: '6px', color: '#2E2F33', fontSize: '12px', lineHeight: '14px' }}>
                                删除项目
                            </div>
                        </Grid.Item>
                    </Grid>
                </footer>
            )}
        </div>
    );
};

export default PageShare;
